<template>
    <!-- 这是最外层容器，会有一个默认的宽度 270px，但是如果用户传递的宽度，那么就使用用户传递的 -->
    <div class="wl-card" :style="width ? { width: width + 'px' } : {}">
        <!-- 卡片图片 -->
        <div class="wl-card-img" :style="imgHeight ? { height: imgHeight + 'px' } : {}">
            <img :src="imgSrc" alt="img">
        </div>
        <!-- 卡片描述 -->
        <div class="wl-card-summary">
            <slot>{{ summary }}</slot>
        </div>
        <div class="wl-card-footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import propObj from './props';
defineOptions({
    name: 'wl-card'
})
defineProps(propObj)
</script>

<style scoped lang="less"></style>